<!DOCTYPE html>
<html>
<?php $this->load->view('seller/public/header.html');?>
<style>
#Images li .operate .img_del {
    float: right;
    margin: 9px 5px;
    font-size: 22px !important;
    cursor: pointer;
}
#Images li .operate .check {
    float: left;
    margin-left: 11px;
    height: 18px;
    padding: 11px 0;
    /* width: 74%; */
	max-width:50%;
    position: relative;
}
#Images img{
	width:300px;
	height:200px
}
</style>
<body class="childrenBody">
<form class="layui-form">
	<blockquote class="layui-elem-quote news_search">
		<!-- <div class="layui-inline">
			<input type="checkbox" name="selectAll" id="selectAll" lay-filter="selectAll" lay-skin="primary" title="全选">
		</div>
		<div class="layui-inline">
			<a class="layui-btn layui-btn-sm layui-btn-danger batchDel">批量删除</a>
		</div> -->
		<div class="layui-inline">
			<a class="layui-btn layui-btn-sm " href="<?php echo site_url('seller/banner/edit')?>">添加新图片</a>
		</div>
	</blockquote>
	<ul class="layer-photos-demo" id="Images"></ul>
</form>
</body>
<script type="text/javascript">
layui.use(['flow','form','layer','upload'],function(){
    var flow = layui.flow,
        form = layui.form,
        layer = parent.layer === undefined ? layui.layer : top.layer,
        upload = layui.upload,
        $ = layui.jquery;

    //流加载图片
    var imgNums = 15;  //单页显示图片数量
    flow.load({
        elem: '#Images', //流加载容器
        done: function(page, next){ //加载下一页
            $.getJSON("<?php echo site_url('seller/banner/getBanner')?>",function(res){
            	console.log(res);
                //模拟插入
                var imgList = [],data = res.data;
                var maxPage = imgNums*page < data.length ? imgNums*page : data.length;
                setTimeout(function(){
                    for(var i=imgNums*(page-1); i<maxPage; i++){
                        imgList.push('<li><img layer-src="'+ data[i].imagePath +'" src="'+ data[i].imagePath +'" alt="'+data[i].bannerName+'"><div class="operate"><div class="check"><span type="" name="belle"  title="'+data[i].bannerName+'" bannerId="'+data[i].bannerId+'">'+data[i].bannerName+'</span></div><i class="layui-icon layui-icon-delete img_del delpic"></i><i class="layui-icon layui-icon-edit img_del editpic"></i></div></li>');
                    }
                    next(imgList.join(''), page < (data.length/imgNums));
                    form.render();
                }, 500);
            });
        }
    });

    //设置图片的高度
    $(window).resize(function(){
        $("#Images li img").height($("#Images li img").width());
    })    

    //弹出层
    $("body").on("click","#Images img",function(){
        parent.showImg();
    })

    //删除单张图片
    $("body").on("click",".delpic",function(){
        var _this = $(this);
        var bannerId=_this.siblings().find("span").attr("bannerId");
        layer.confirm('确定删除图片"'+_this.siblings().find("span").attr("title")+'"吗？',{icon:3, title:'提示信息'},function(index){
            $.ajax({
            	url:'<?php echo site_url("seller/banner/del")?>',
            	method:'post',
            	dataType:'json',
            	data:{bannerIds:[bannerId]},
            	success:function(res){
            		console.log(res.code);
            		if(res.code==200){
            			layer.msg('删除成功');
            			_this.parents("li").hide(1000);
                        setTimeout(function(){_this.parents("li").remove();},950);
                        layer.close(index);
            		}else{
            			layer.msg('删除失败');
            		}            		
            	},
            	fail:function(){
            		layer.msg('删除失败');
            	}
            });
        	
        });
    })
    
    //编辑图片
    $("body").on("click",".editpic",function(){
        var _this = $(this);
        var bannerId=_this.siblings().find("span").attr("bannerId");
        location.href="<?php echo site_url('seller/banner/edit?bannerId=')?>"+bannerId;
    })

   

})
</script>
</html>